﻿@{
    ViewBag.Title = "TreeView : Working with Client Side Tree Node";
}

<h2>TreeView : Client Side Tree Node</h2>

<h3>Sample</h3>

<div id="divFunctions" style="visibility:hidden;padding-bottom:20px;">
    <div style="padding-bottom:5px;">
        <button id="expandButton" onclick="expandButton_onClick();" style="padding-right:20px;">Expand Developer Tools</button>
        <button id="collapseButton" onclick="collapseButton_onClick();" style="padding-right:20px;">Collapse Developer Tools</button>

        <button id="highlightButton" onclick="highlightButton_onClick();" style="padding-right:20px;">Highlight Developer Tools</button>
        <button id="unhighlightButton" onclick="unhighlightButton_onClick();" style="padding-right:20px;">Unhighlight Developer Tools</button>
    </div>
    <div style="padding-bottom:5px;">
        <button id="selectButton" onclick="selectButton_onClick();" style="padding-right:20px;">Select ASP.NET MVC</button>
        <button id="deselectButton" onclick="deselectButton_onClick();" style="padding-right:20px;">Deselect ASP.NET MVC</button>

        <button id="enableButton" onclick="enableButton_onClick();" style="padding-right:20px;">Enable ASP.NET MVC</button>
        <button id="disableButton" onclick="disableButton_onClick();" style="padding-right:20px;">Disable ASP.NET MVC</button>
    </div>
    <div style="padding-bottom:5px;">
        <button id="checkButton" onclick="checkButton_onClick();" style="padding-right:20px;">Check ASP.NET MVC</button>
        <button id="uncheckButton" onclick="uncheckButton_onClick();" style="padding-right:20px;">Uncheck ASP.NET MVC</button>

        <button id="parentButton" onclick="parentButton_onClick();" style="padding-right:20px;">Show ASP.NET MVC Parent in Log Messages</button>
        <button id="childrenButton" onclick="childrenButton_onClick();" style="padding-right:20px;">Show Developer Tools Children in Log Messages</button>
    </div>
</div>

<div style="float:right;width:400px;height:500px;">
    Log Messages
    <div id="logMessages" style="width:100%;height:500px;border:1px solid black;padding:5px 5px 5px 5px;margin-top:5px;overflow:scroll;">
    </div>
</div>

@{
    Html.Telerik().TreeView()
        .Name("MyTreeView")
        .DataBinding(dataBinding => dataBinding
            .Ajax().Select("SelectTreeItems", "TreeView")
        )
        .ClientEvents(events => events.OnDataBound("MyTreeView_OnDataBound"))
        .ShowCheckBox(true)
        .Render();
}

<script type="text/javascript">
    var _devToolsNode = null;
    var _aspNetMvcNode = null;

    MyTreeView_OnDataBound = function (e) {
        $('#divFunctions').css('visibility', 'visible');
        _devToolsNode = $('#MyTreeView').data('tTreeView').findNodeByText('Developer Tools');
        _aspNetMvcNode = $('#MyTreeView').data('tTreeView').findNodeByValue('2');
    }

    expandButton_onClick = function () {
        _devToolsNode.expand();
    }

    collapseButton_onClick = function () {
        _devToolsNode.collapse();
    }

    highlightButton_onClick = function () {
        _devToolsNode.highlight();
    }

    unhighlightButton_onClick = function () {
        _devToolsNode.unhighlight();
    }

    selectButton_onClick = function () {
        if (_aspNetMvcNode.selected() == false) {
            _aspNetMvcNode.select();
        }
    }

    deselectButton_onClick = function () {
        if (_aspNetMvcNode.selected()) {
            _aspNetMvcNode.deselect();
        }
    }

    enableButton_onClick = function () {
        _aspNetMvcNode.enable();
    }

    disableButton_onClick = function () {
        _aspNetMvcNode.disable();
    }

    checkButton_onClick = function () {
        _aspNetMvcNode.check();
    }

    uncheckButton_onClick = function () {
        _aspNetMvcNode.uncheck();
    }

    parentButton_onClick = function () {
        var parent = _aspNetMvcNode.parent();
        addLogMessage('The ASP.NET MVC Parent is: ' + parent.text());
    }

    childrenButton_onClick = function () {
        var children = _devToolsNode.children();
        var div = $('<div/>').text('The Developer Tools Children are: ');
        var $ol = $('<ol/>');
        $.each(children, function (idx, child) {
            $ol.append($('<li/>').text(child.text()));
        });
        div.append($ol);
        addLogMessage(div);
    }

    addLogMessage = function (msg) {
        $('#logMessages').prepend($('<div/>').css({ 'width': '100%', 'margin-bottom': '5px' }).append(msg));
    }

</script>
